<template>
  <div class="rule_container">
    <h1>比赛规则</h1>
    <h3 v-if="isCenter" class="message2">
      {{getMessage}}
    </h3>
    <h3 v-else class="message1">
      {{getMessage}}
    </h3>
    <div v-show="isShow" class="radios">
    <label for="ten" ><input id="ten" @click="setIndex(0)" type="radio" name="1" value="1" checked="true">10分  </label>
    <label for="twenty"><input id="twenty" @click="setIndex(1)" type="radio" name="1" value="2"/>20分</label>
    <label for="thirty"><input id="thirty" @click="setIndex(2)" type="radio" name="1" value="3"/>30分</label>
    </div>
    <el-button type="primary" @click="jump">继续</el-button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
export default {
  name:'rule',
  setup(){
    const data = reactive({
      rules:[
      '必答题以队为单位轮流作答,每轮到一队该队派出一名队员回答问题,答对给该队加上10分,答错则扣10分;',
      '抢答题在主持人念完题说开始抢答后再开始抢答,由抢到该题的参赛队派出任何一人进行解答,答对者给该队加上10分,答错则扣10分,若在计时器规定的时间内无人抢答则说明该题难度较大或者题目有问题,则公布正确答案此题作废',
      '风险题分为10分、20分、30分三档,每个参赛队可以任意选择一档选题作答,由该队确定一名选手选择想挑战的分值，答对加上相应分值，答错则倒扣对应分值。',
      '冠亚争霸冠亚军之间的最终对决'
    ]
    })
    const store = useStore();
    let getMessage = data.rules[store.state.ruleIndex];
    const router = useRouter();
    const jump = ()=>{
      router.push("/layout")
    }
    const setIndex=(index)=>{
      store.state.rushIndex = index;
    }
    let isShow;
    let isCenter;
    if(store.state.ruleIndex==3){
      isCenter = true;
    }else{
 isCenter = false;
    }
    if(store.state.ruleIndex==2){
      isShow = true;
    }else{
 isShow = false;
    }
    return {
      ...toRefs(data),
      getMessage,
      jump,
      setIndex,
      isShow,
      isCenter
    }
  }
}
</script>

<style scoped>
.rule_container{
  height: 100vh;
  width: 100%;
  display: flex;
  background-color: rgb(133, 199, 244);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 单选框前按钮大小 */
.radios input{
  width: 16px;
  height: 16px;
}
.radios label{
  line-height: 20px;
  margin-right: 15px;
  font-size: large;
  font-weight: bolder;
}
.message1{
  width: 500px;
  height: 20%;
  text-align: left;
}
.message2{
  width: 500px;
  height: 18%;
  text-align: center;
}
</style>